<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'productName'">
          <div class="product-image-text">
            <div class="img">
              <Image
                :src="record.imageUrl"
                width="67px"
                height="67px"
                style="object-fit: cover"
              ></Image>
            </div>
            <Tooltip :title="record.productName">
              <div class="text">{{ record.productName }}</div>
            </Tooltip>
          </div>
        </template>
        <template v-else-if="column.key === 'shopName'">
          <div class="image-text">
            <Avatar :src="record.shopLogo" />
            <div class="text">{{ record.shopName }}</div>
          </div>
        </template>
        <template v-else-if="column.key === 'minPrice'">
          <Price :min-price="record.productMinPrice" :max-price="record.productMaxPrice" :price-show-type="record.priceShowType"/>
        </template>
        <template v-else-if="column.key === 'userName'">
          <div class="image-text">
            <Avatar :src="record.userAvatar" />
            <div class="text">
              <span>{{ record.userName }}</span>
              <span>{{ record.userPhone }}</span>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '详情',
                onClick: () => handleAdd(1, record),
              },
              record.reviewStatus == ReviewStatus.Pending
                ? {
                    label: '立即审核',
                    onClick: () => handleAdd(2, record),
                  }
                : {},
            ]"
          />
        </template>
        <template v-if="column.key === 'logisticsMode'">
          <span>{{
            dictionary.logisticsMode.find((v) => v.dictValue === record.logisticsMode)?.dictLabel
          }}</span>
        </template>
      </template>
    </BasicTable>
    <Detail @register="register" @reload="reload"></Detail>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import { BasicTable, useTable, TableAction, FormSchema } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { getProductList, getProductCategory } from '@/api/hby/productManage/index';
  import Dictionary from '@/utils/dictionary';
  import { Image, Avatar, Tooltip } from 'ant-design-vue';
  import { IProductResult } from '@/api/hby/productManage/type';
  import Detail from './ProductExamineDetail.vue';
  import { useModal } from '@/components/Modal';
  import { ReviewStatus } from '@/enums/productManage';
  import dictionary from '@/utils/dictionary/localDicts';
  import { productCategoryList } from '@/api/hby/categoryManagement';
  import { isArray } from '@/utils/is';
  import Price from "@/components/Price/index.vue";

  const dicts = Dictionary.getLocalMulti([
    'productType',
    'productReviewStatus',
    'productReviewMenu',
  ]);

  const tableSchemas = reactive<FormSchema[]>([
    {
      field: `keyWord`,
      label: `产品名称`,
      component: 'Input',
      colProps: {
        span: 6,
      },
    },
    {
      field: `productCategoryId`,
      label: `产品分类`,
      component: 'ApiCascader',
      componentProps: {
        api: productCategoryList,
        isLoadData: false,
        initFetchParams: { size: 999 },
        labelField: 'name',
        valueField: 'id',
        isLeaf: (record) => {
          return !record.children
        },
        showLastLabel: true,
        showSearch: true,
        filterOption: (input: string, option: any) => {
          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
      },
      colProps: {
        span: 5,
      },
    },
    {
      field: `productType`,
      label: `产品类型`,
      component: 'Select',
      componentProps: {
        fieldNames: { label: 'dictLabel', value: 'dictValue' },
        options: dicts.productType,
      },
      colProps: {
        span: 4,
      },
    },
    {
      field: `reviewStatus`,
      label: `审核状态`,
      component: 'Select',
      show: true,
      componentProps: {
        fieldNames: { label: 'dictLabel', value: 'dictValue' },
        options: dicts.productReviewStatus,
      },
      colProps: {
        span: 3,
      },
    },
  ]);

  const [register, { openModal }] = useModal();

  function handleAdd(type: number, row: IProductResult) {
    openModal(true, {
      type,
      row,
    });
  }

  const [registerTable, { reload }] = useTable({
    api: (params: any) => {
      if(isArray(params.productCategoryId)){
        params.productCategoryId = params.productCategoryId[params.productCategoryId.length - 1];
      }
      return getProductList(params)
    },
    columns: getBasicColumns(),
    showIndexColumn: true,
    clickToRowSelect: false,
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    formConfig: {
      labelWidth: 100,
      schemas: tableSchemas as unknown as FormSchema[],
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
    },
    afterFetch: (data: IProductResult[]) => {
      return data.map((item) => {
        return {
          ...item,
          productType: dicts.productType.find((v) => v.dictValue == item.productType)?.dictLabel,
          reviewStatusText: dicts.productReviewStatus.find((v) => v.dictValue === item.reviewStatus)
            ?.dictLabel,
          totalStockNum: item.totalStockNum,
          
        };
      });
    },
  });
</script>

<style lang="less" scoped>
  .product-image-text {
    display: flex;
    align-items: center;
    gap: 16px;

    .text {
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 定义文本的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: normal; /* 保证文本换行 */
      line-height: 1.6; /* 根据需要调整行高 */
      max-height: 3.2em; /* 行高乘以行数 */
    }
  }

  .image-text {
    display: flex;
    align-items: center;
    gap: 16px;

    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
